<template>
   <div id="app">
       <div class="pannel">
        <div class="solgan">
            <span  class="solganText">找回密码</span>
        </div>
        <div class="login">
            <div class="account">
                <div style="display: flex;">
                    <el-input class="account" 
                        :maxlength="11" 
                        ref="account" 
                        v-model="phoneNumVal" 
                        placeholder="输入手机号"
                        @focus="phoneFocus"
                        @blur="phoneLostFocus"
                        required
                    ></el-input>
                    <el-button class="veriCodeButtonDisable" v-if="phoneError">验证码</el-button>
                    <el-button class="veriCodeButtonEnable" v-else-if="!downCountFrezz" @click=" applyVeriCode">验证码</el-button>
                    <el-button v-else class="veriCodeButtonDisable">验证码{{downCount}}</el-button>
                </div>
                <div style="display: flex;">
                    <span style="display: flex;" class="is-error" v-if="phoneError && phoneActive">请输入正确的手机号</span>
                </div>
            </div>
            
            <div class="veriCode">
                <el-input class="veriCode" 
                ref="veriCode" v-model="veriCodeVal" 
                placeholder="输入验证码" 
                :maxlength="6"
                @focus="vericodeFocus"
                @blur="vericodeLostFocus"
                required
                ></el-input>
                <span class="is-error" v-if="vericodeError && vericodeActive">验证码是6位数字</span> 
            </div>

            <div class="passwd">
                <el-input class="passwd" 
                ref="passwd" v-model="passWordVal" 
                placeholder="输入密码" 
                type="password" show-password
                :maxlength="10"
                required
                @focus="passwordFocus"
                @blur="passwordLostFocus">输入密码</el-input>
                <span class="is-error" v-if="passwdError && passwdActive">密码不少于8位，包含数字和大小写字母</span> 
            </div>
            
            <div class="passwd">
                <el-input class="passwd" 
                ref="passwd" v-model="check_passWordVal" 
                placeholder="确认密码" 
                type="password" show-password
                :maxlength="10"
                required
                @focus="check_passwordFocus"
                @blur="check_passwordLostFocus">确认密码</el-input>
                <span class="is-error" v-if="check_passwd_same && check_passwdActive">请于密码保持一致</span> 
                <span class="is-error" v-else-if="check_passwdError && check_passwdActive">密码不少于8位，包含数字和大小写字母</span>  
            </div>

            <el-button v-if="isChecked" class="registEnable" @click="update_passwd">提交</el-button>
            <el-button v-else  class="registDisable">提交</el-button>
            
        </div> 
       </div>
   </div> 
</template>

<script>
import axios from 'axios';
import { ElNotification } from 'element-plus';
export default{
    name:'ForgetPassword',
    data(){
        return{
            phoneNumVal:'',
            passWordVal:'',
            veriCodeVal:'',
            check_passWordVal:'',

            phoneRegex: /^1[3456789]\d{9}$/, // 电话号码的正则表达式
            passwdRegex:/^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]).{8,}$/,//密码强度正则
            veriCodeRegex:/^[0-9]{6}$/,//验证码为6位数字
            
            phoneActive:false,
            passwdActive:false,
            vericodeActive:false,
            check_passwdActive:false,

            isChecked:false,

            downCount:60,
            downCountFrezz:false,
            timer:null,
        };
    },
    computed:{
        phoneError(){
            console.log(this.phoneRegex.test(this.phoneNumVal));
            return !this.phoneRegex.test(this.phoneNumVal);
        },
        passwdError(){
            console.log(this.passwdRegex.test(this.passWordVal));
            return !this.passwdRegex.test(this.passWordVal);
        },
        check_passwdError(){
            console.log(this.passwdRegex.test(this.check_passWordVal));
            return !this.passwdRegex.test(this.check_passWordVal);
        },
        vericodeError(){
            return !this.veriCodeRegex.test(this.veriCodeVal);
        },
        check_passwd_same(){
            console.log("passwd: "+this.passWordVal+" ~ checkPasswd: "+this.check_passWordVal)
            return !(this.passWordVal===this.check_passWordVal);
        },
        isChecked(){
            if(this.phoneError||this.passwdError||this.check_passwdError||this.vericodeError||this.check_passwd_same)
                return this.isChecked;
            else
                return !this.isChecked;
        }

    },
    methods:{
        phoneFocus(){
            this.phoneActive=true;
        },
        phoneLostFocus(){
            this.phoneActive=false;
        },
        passwordFocus(){
            this.passwdActive=true;
        },
        passwordLostFocus(){
            this.passwdActive=false;
        },
        check_passwordFocus(){
            this.check_passwdActive=true;
        },
        check_passwordLostFocus(){
            this.check_passwdActive=false;
        },
        vericodeFocus(){
            this.vericodeActive=true;
        },
        vericodeLostFocus(){
            this.vericodeActive=false;
        },
        applyVeriCode(){
            this.downCountFrezz=true;
        
            //倒计时
            this.timer=setInterval(()=>{
                this.downCount--;
                if(this.downCount<=0){
                    console.log(this.downCount);
                    clearInterval(this.timer)
                    this.downCount=60;
                    this.downCountFrezz=false;
                }
            },1000);
            //调用生成验证码
            this.getVeriCode(this.phoneNumVal)
        },
        async getVeriCode(phoneNum){
            try{
                    //await axios.get("/getwords?letter="+this.$route.params.letter,{withCredentials:true})
                    await axios.get("/api/getvericode/",
                    {params:{
                    phone:phoneNum,
                    }},
                    {withCredentials:true})
                    .then(response=>
                    {
                    try {
                            const data = JSON.parse(response.data);
                            if(data){
                                //console.log( data);
                                ElNotification({
                                    message:data[0]['msg'],
                                    title:'获取验证码',
                                    type:'info',
                                    duration:3000,
                                })
                            }
                        } catch (error) {
                        console.error(error);
                    }
                })
            }
            catch(error){
            console.log(error);
        }
        },

       async update_passwd(){
            //console.log(this.phoneNumVal+"@"+this.veriCodeVal)
            const data={
            phone:this.phoneNumVal,
            vericode:this.veriCodeVal,
            password:this.passWordVal};
            //console.log(JSON.stringify(data));
            await axios.post("/api/forget/",data,{withCredentials:true})
                .then(response=>
                {
                    try{
                        if(response.data){ 
                            console.log(response.data['msg']);
                            ElNotification({
                            message:response.data['msg'],
                            title:response.data['code'],
                            type:'info',
                            duration:3000,
                            });
                            //如果后端更新数据成功，执行页面跳转
                            if(response.data['code']==20000){
                                console.log("url: "+(response.data['data'][0].url));
                                const redirect_url=response.data['data'][0].url;
                                console.log("url: "+redirect_url);
                                this.$router.push({path:`${redirect_url}`});
                            }
                        }
                    }
                    catch(error){
                        console.log(error)
                    }
                });
            }
        },
    }
    
</script>

<style scoped>
div#app{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('https://sam-test.oss-cn-beijing.aliyuncs.com/assets/loginbkimg%40170%20(1).png');
    background-repeat: no-repeat;
    background-size: cover;
}
div.pannel{
    width: 75dvw;
    height: 85dvh;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    background-color: #fff;
    margin: 5.5% auto;
    border-radius: 5pt;
}


.el-input.account.account{
  flex: 70%;
}

.el-button.veriCodeButtonEnable{
    margin-left: 10px;
    background-color:#2a55e2 ;
    color: #fff;
}

.el-button.veriCodeButtonDisable{
    margin-left: 10px;
    background-color:#f4f4f5 ;
    color: #909399;
}

div.account{
    margin-bottom: 2dvh;
    width: 60%;
    margin-left: 15%;
}
div.passwd{
    margin-bottom: 2dvh;
    width: 60%;
    margin-left: 15%;
}
div.veriCode{
    margin-bottom: 2dvh;
    width: 60%;
    margin-left: 15%;
    
}
.is-error{
   font-size: small;
   font-weight: 300;
   color:red;
   display: block;
   margin-left: 15%;
}
button.el-button.registEnable{
    margin-top: 7dvh;
    display: block;
    width: 22.5dvw;
    font-weight: 600;
    background-color:#2a55e2 ;
    color: #fff;
    width: 50%;
    margin-left: 20%;
}

button.el-button.registDisable{
    margin-top: 7dvh;
    display: block;
    width: 22.5dvw;
    font-weight: 600;
    background-color:#f4f4f5 ;
    color: #909399;
    width: 50%;
    margin-left: 20%;
}

div.login{
    margin:5.2dvh auto;
    padding-left: 3dvw;
    padding-right: 3dvw;
    text-align: left;
    font-size: 15px;
    color: rgba(0,0,0,0.65);
    font-weight: 500;
}

span.solganText{
    display: block;
    padding-top: 5dvh;
    color: #2245ba;
    font-size: 18pt;
    font-weight:bold;
}
</style>